<template>
  <view class="user-container">
    <!-- 用户信息开始 -->
    <view class="user-info">
      <view class="user-avatar">
        <image class="avatar" :src="avatar" mode="widthFix" />
        <view class="example-body">
          <u-upload class="upload" accept="image" :maxCount="1" @afterRead="uploadAvatar"></u-upload>
        </view>
      </view>
      <view class="user-desc">
        <view class="nickname"> {{ nickname }} </view>
        <view class="mobile"> {{ mobile }} </view>
      </view>
      <view class="settings">
        <image class="icon" src="@/static/images/settings.png" mode="widthFix" />
      </view>
    </view>
    <!-- 用户信息结束 -->
    <!-- 订单导航开始 -->
    <view class="order-nav">
      <view class="nav-item" v-for="item in orderNavList" :key="item.id" @click="handleOrderClick(item.id)">
        <view class="nav-icon">
          <image class="nav-pic" :src="item.url" mode="widthFix" />
        </view>
        <text class="nav-text"> {{ item.title }} </text>
      </view>
    </view>

    <!-- 订单导航结束 -->
    <!-- 其他导航菜单开始 -->
    <view class="menu-list">
      <view class="menu-item" v-for="item in menuList" :key="item.id" @click="handleMenuClick(item.id)">
        <view class="menu-text">
          <view class="menu-icon">
            <image class="menu-pic" :src="item.url" mode="widthFix" />
          </view>
          <text class="text"> {{ item.title }} </text>
        </view>
        <view class="menu-arrow">
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
    </view>
    <!-- 其他导航菜单结束 -->
    <Transition name="toast">
      <Toast v-if="globalLoading"></Toast>
    </Transition>
  </view>
</template>

<script lang="ts">
import { uploadAvatar } from '@/api'
import { UserTypes } from '@/store/actions_types/actions_types'
import { UserInfo } from '@/typings'
import Vue from 'vue'
import { mapState } from 'vuex'

export default Vue.extend({
  data() {
    return {
      menuList: [
        {
          id: 'userInfo',
          url: require('@/static/images/wnt_个人信息.png'),
          title: '个人资料'
        },
        {
          id: 'order',
          url: require('@/static/images/我的订单.png'),
          title: '我的订单'
        },
        {
          id: 'collection',
          url: require('@/static/images/收藏.png'),
          title: '我的收藏'
        },
        {
          id: 'address',
          url: require('@/static/images/收货地址.png'),
          title: '收货地址'
        },
        {
          id: 'secure',
          url: require('@/static/images/安全中心.png'),
          title: '安全中心'
        }
      ],
      orderNavList: [
        {
          id: 0,
          url: require('@/static/order/待支付.png'),
          title: '待付款'
        },
        {
          id: 1,
          url: require('@/static/order/待发货.png'),
          title: '待发货'
        },
        {
          id: 2,
          url: require('@/static/order/待收货.png'),
          title: '待收货'
        },
        {
          id: 3,
          url: require('@/static/order/待评价.png'),
          title: '待评价'
        },
        {
          id: 4,
          url: require('@/static/order/已完成订单.png'),
          title: '已完成'
        }
      ],
      userAvatarList: [
        {
          id: 0,
          url: require('@/static/avatar/5810ea612ebb2_610.jpg')
        },
        {
          id: 1,
          url: require('@/static/avatar/871aa2b9b0a55be3f0738d76a15e23ebac5c586811e29-B6Aozr_fw658.webp')
        },
        {
          id: 2,
          url: require('@/static/avatar/u=1549520305,2078589087&fm=253&fmt=auto&app=138&f=JPEG.webp')
        },
        {
          id: 3,
          url: require('@/static/avatar/u=3030190913,291621981&fm=253&fmt=auto&app=138&f=JPEG.webp')
        },
        {
          id: 4,
          url: require('@/static/avatar/u=3482753254,221142694&fm=253&fmt=auto&app=138&f=JPEG.webp')
        },
        {
          id: 5,
          url: require('@/static/avatar/u=3657379792,2687418372&fm=193.jpg')
        }
      ],
      nickname: '',
      mobile: '',
      avatar: ''
    }
  },
  computed: {
    ...mapState('user', ['globalLoading'])
  },
  created() {
    const state = this.$store.state.user.userInfo
    if (!state.avatar) {
      this.avatar = this.userAvatarList[Math.floor(Math.random() * this.userAvatarList.length)].url
    } else {
      this.avatar = state.avatar
    }
    this.mobile = state.mobile
    this.nickname = state.nickname || '书香逸居用户'
  },
  methods: {
    handleMenuClick(id: string) {
      switch (id) {
        case 'userInfo':
          break
        case 'order':
          break
        case 'collection':
          break
        case 'address':
          break
        case 'secure':
          break
        default:
          break
      }
    },
    handleOrderClick(id: number) {
      switch (id) {
        case 0:
          break
        case 1:
          break
        case 2:
          break
        case 3:
          break
        case 4:
          break
        default:
          break
      }
    },
    uploadAvatar(file: any) {
      const imagePath: string = file.file.url
      uni.getFileSystemManager().readFile({
        filePath: imagePath, // 图片路径
        encoding: 'base64',
        success: async (data) => {
          const base64Data = 'data:image/png;base64,' + data.data
          // 显示加载动画
          this.$store.commit(`user/${UserTypes.SET_LOADING}`, true)
          // 上传用户头像
          try {
            const data = await uploadAvatar({
              avatar: base64Data
            })
            if (data.code === 0) {
              const userInfo = data.data as UserInfo
              const payload = {
                username: userInfo.username,
                update_date: userInfo.update_date,
                sex: userInfo.sex,
                nickname: userInfo.nickname,
                mobile: userInfo.mobile,
                id: userInfo.id,
                email: userInfo.email,
                create_date: userInfo.create_date,
                birthday: userInfo.birthday,
                avatar: userInfo.avatar
              }
              this.mobile = userInfo.mobile
              this.nickname = userInfo.nickname || '书香逸居用户'
              this.avatar = process.env.VUE_APP_BASE_DEV + userInfo.avatar
              this.$store.commit(`user/${UserTypes.SET_USER_INFO}`, payload)
              this.setErrorTip('头像上传成功', 'success')
            } else {
              this.setErrorTip(data.message)
            }
          } catch (err) {
            console.log(err)

            this.setErrorTip('头像上传失败')
          }
        },
        fail: () => {
          this.setErrorTip('文件读取失败')
        }
      })
    },
    // 设置错误提示
    setErrorTip(message: string, loading_type: 'waring' | 'loading' | 'success' = 'waring') {
      this.$store.commit(`user/${UserTypes.SET_LOADING_TYPE}`, loading_type)
      this.$store.commit(`user/${UserTypes.SET_MESSAGE}`, message)
      this.$store.commit(`user/${UserTypes.SET_LOADING}`, true)
    }
  }
})
</script>

<style lang="scss" scoped>
.user-container {
  background-color: $uni-bg-color-grey;
  font-family: 'aliregular';
  min-height: 100vh;

  .user-info {
    padding: 20rpx;
    display: flex;
    align-items: center;
    position: relative;
    background-color: #fff;

    .user-avatar {
      margin-right: 20rpx;
      width: 96rpx;
      height: 96rpx;
      border-radius: 999rpx;
      overflow: hidden;
      position: relative;

      .example-body {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;

        .u-upload__wrap {
          align-items: center;
          justify-content: center;
        }
        ::v-deep .u-upload__button {
          margin: 0 !important;
        }
      }

      .avatar {
        width: 100%;
      }
    }

    .user-desc {
      .nickname {
        color: $uni-theme-color;
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
      }

      .mobile {
        color: $uni-theme-light-color;
        font-size: 28rpx;
        font-weight: 600;
      }
    }

    .settings {
      position: absolute;
      right: 20rpx;
      top: 20rpx;
      width: 48rpx;

      .icon {
        width: 100%;
      }
    }
  }

  .order-nav {
    margin-top: 20rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    padding: 20rpx;

    .nav-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .nav-icon {
        width: 48rpx;
        .nav-pic {
          width: 100%;
        }
      }

      .nav-text {
        font-size: 24rpx;
        color: $uni-theme-light-color;
        margin-top: 10rpx;
        font-weight: 600;
      }
    }
  }

  .menu-list {
    background-color: #fff;
    padding: 20rpx 0;
    margin-top: 20rpx;

    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 30rpx;
      border-bottom: 2rpx solid $uni-bg-color-grey-2;

      &:last-child {
        border: none;
      }

      .menu-text {
        display: flex;
        align-items: center;

        .menu-icon {
          width: 32rpx;

          .menu-pic {
            width: 100%;
          }
        }

        .text {
          margin-left: 10rpx;
          font-size: 28rpx;
          color: $uni-theme-light-color;
        }
      }
    }
  }
}
</style>
